<template>
  <view class="container">
    <!-- 导航栏 -->
    <uni-nav-bar 
      dark 
      :fixed="true" 
      shadow 
      status-bar 
      left-icon="arrow-left" 
      title="已认领客户" 
      @clickLeft="back"
    />
    
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 搜索区域 -->
      <view class="search-container">
        <view class="search-box">
          <uni-icons type="search" size="18" color="#999" class="search-icon"></uni-icons>
          <input 
            type="text" 
            v-model="searchKeyword" 
            placeholder="请输入客户名称搜索"
            class="search-input"
            @confirm="searchData"
			@input="loadData()"
          />
        </view>
      </view>

      <!-- 滚动列表 -->
      <scroll-view 
        class="table-scroll-container" 
        scroll-y 
        @scrolltolower="loadMore"
        @refresherrefresh="onRefresherRefresh"
        refresher-enabled
        :refresher-threshold="45"
        refresher-background="#f5f5f5"
        :refresher-triggered="refreshing"
        @refresherrestore="onRefresherRestore"
        :style="{ height: tableHeight }"
      >
        <!-- 列表项 -->
        <view v-if="listData.length > 0 && !loading && !refreshing">
          <view 
            class="list-item" 
            v-for="item in listData" 
            :key="'item-' + item.id"
            @click="isSelectMode ? handleSelect(item.id) : null"
          >
            <view class="item-content">
              <checkbox 
                class="item-checkbox" 
                v-if="isSelectMode" 
                :checked="selectedIds.includes(item.id)"
                @click.stop="handleSelect(item.id)"
              ></checkbox>
              <text class="item-name">{{ item.tbCrmCustomer?.partyName || '未知客户' }}</text>
            </view>
          </view>
        </view>
        
        <!-- 加载中提示 -->
        <view class="loading-state" v-if="loading && !refreshing && listData.length > 0">
          <uni-icons type="spinner" size="30" color="#007aff" class="loading-spin"></uni-icons>
          <text class="loading-text">加载中...</text>
        </view>
        
        <!-- 无数据提示 -->
        <view class="empty-state" v-if="listData.length === 0 && !loading && !refreshing">
          <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
          <text class="empty-text">暂无客户数据</text>
        </view>
        
        <!-- 无更多数据提示：仅依赖 showNoMore 控制，显示2秒后自动隐藏 -->
        <view class="no-more-state" v-if="showNoMore">
          <text class="no-more-text">没有更多客户数据了</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 底部固定按钮区域 -->
    <view class="bottom-buttons">
      <button 
        class="bottom-btn add-btn" 
        v-if="!isSelectMode"
        @click="handleAdd"
      >
        添加
      </button>
      <button 
        class="bottom-btn cancel-btn" 
        v-if="isSelectMode"
        @click="handleCancel"
      >
        取消
      </button>
      
      <button 
        class="bottom-btn remove-btn" 
        :class="{ 'confirm-remove': isSelectMode && selectedIds.length > 0 }"
        @click="handleRemove"
        :disabled="deleteLoading || (isSelectMode && selectedIds.length === 0)"
      >
        {{ isSelectMode ? (selectedIds.length > 0 ? '确定移除' : '暂无选中项') : '移出' }}
      </button>
    </view>
  </view>
</template>

<script>
import utils from '../../common/utils'

export default {
  data() {
    return {
      searchKeyword: '',
      tableHeight: '600px',
      listData: [],
      // 分页参数
      currentPage: 1,
      pageSize: 30,
      totalCount: 0,
      totalPages: 0,
      // 状态管理
      loading: false,
      refreshing: false,
      isSelectMode: false,
      selectedIds: [], // 存储当前选中的客户ID
      deleteLoading: false, // 移除操作的加载状态
      // 新增：控制“无更多提示”显示/隐藏 + 定时器实例
      showNoMore: false,
      noMoreTimer: null
    };
  },
  // 页面卸载时清除定时器（防止内存泄漏+残留）
  onUnload() {
    if (this.noMoreTimer) clearTimeout(this.noMoreTimer);
  },
  onLoad() {
    this.calculateTableHeight();
    this.loadData();
  },
  methods: {
    /**
     * 计算列表高度（适配不同设备）
     */
    calculateTableHeight() {
      try {
        const { windowHeight } = uni.getSystemInfoSync();
        // 预留导航栏(144px)和底部按钮(100px)高度
        this.tableHeight = `${windowHeight - 144 - 100}px`;
      } catch (e) {
        console.error('计算列表高度失败:', e);
        this.tableHeight = '500px'; // 异常时默认高度
      }
    },

    /**
     * 加载客户数据（分页+搜索）：新增“无更多提示”控制逻辑
     */
    async loadData() {
      this.loading = true;
      try {
        const userInfo = uni.getStorageSync("userInfo");
        // 登录状态验证
        if (!userInfo?.aesKey || !userInfo?.aesIv) {
          uni.showToast({ title: '请先登录', icon: 'none' });
          return;
        }

        // 构造请求参数（与后端匹配）
        const requestData = {
          timestamp: Date.now(),
          curpage: this.currentPage,
          pagesize: this.pageSize,
          keyword: this.searchKeyword
        };

        // 参数加密（与后端加密逻辑一致）
        const encryptedData = this.$utils.encrypt(
          JSON.stringify(requestData),
          userInfo.aesKey,
          userInfo.aesIv
        );

        // 调用接口
        const res = await this.$myRequest.post_token(
          getApp().globalData.khrlQuery,
          { data: encryptedData }
        );

        // 处理响应
        if (res.code === 200 && res.data) {
          const decrypted = utils.decrypt(res.data, userInfo.aesKey, userInfo.aesIv);
          const result = JSON.parse(decrypted);

          // 更新列表数据（首页覆盖，非首页追加）
          this.listData = this.currentPage === 1 
            ? result.listInfo || [] 
            : [...this.listData, ...(result.listInfo || [])];
          
          // 更新分页信息
          this.totalCount = result.pageInfo?.total || 0;
          this.totalPages = result.pageInfo?.pageTotal || 0;

          // 核心：控制“无更多提示”——显示2秒后自动隐藏
          this.controlNoMoreTip();
        } else {
          uni.showToast({ title: '加载客户数据失败', icon: 'none' });
          this.listData = this.currentPage === 1 ? [] : this.listData;
          this.showNoMore = false; // 加载失败时隐藏提示
        }
      } catch (e) {
        console.error('加载客户数据异常:', e);
        uni.showToast({ title: '网络错误', icon: 'none' });
        this.listData = this.currentPage === 1 ? [] : this.listData;
        this.showNoMore = false; // 异常时隐藏提示
      } finally {
        this.loading = false;
        this.refreshing = false;
        uni.stopPullDownRefresh();
      }
    },

    /**
     * 新增：控制“无更多提示”显示/隐藏的统一方法
     */
    controlNoMoreTip() {
      // 1. 清除之前的定时器（防止重复触发导致隐藏延迟）
      if (this.noMoreTimer) clearTimeout(this.noMoreTimer);
      
      // 2. 只有“是最后一页+有数据”时，才显示提示
      if (this.currentPage >= this.totalPages && this.listData.length > 0) {
        this.showNoMore = true;
        // 3. 2秒后自动隐藏
        this.noMoreTimer = setTimeout(() => {
          this.showNoMore = false;
        }, 1000); // 时长可改（单位：毫秒）
      } else {
        this.showNoMore = false;
      }
    },

    /**
     * 核心：移出按钮逻辑（切换选择模式/执行移除）
     */
    async handleRemove() {
      // 1. 非选择模式 → 进入选择模式
      if (!this.isSelectMode) {
        this.isSelectMode = true;
        return;
      }

      // 2. 选择模式但无选中项 → 不执行（按钮已禁用，双重保险）
      if (this.selectedIds.length === 0) {
        return;
      }

      // 3. 确认移除（防止误操作）
      uni.showModal({
        title: '确认移除',
        content: `确定要移除选中的${this.selectedIds.length}个客户吗？`,
        cancelText: '取消',
        confirmText: '确定',
        success: async (res) => {
          if (res.confirm) {
            await this.performRemove(); // 执行实际移除操作
          }
        }
      });
    },

    /**
     * 执行实际的移除操作（调用接口+本地更新）
     */
    async performRemove() {
      this.deleteLoading = true;
      const deletedIds = [...this.selectedIds]; // 保存本次要删除的ID

      try {
        const userInfo = uni.getStorageSync("userInfo");
        if (!userInfo?.aesKey || !userInfo?.aesIv) {
          uni.showToast({ title: '请先登录', icon: 'none' });
          return;
        }

        // 构造移除请求参数（与后端删除接口匹配）
        const requestData = {
          timestamp: Date.now(),
          deleteIds: deletedIds, // 本次删除的ID数组
          userId: userInfo.userId // 登录用户ID（后端可能需要校验）
        };
        console.info("移除客户请求参数:", JSON.stringify(requestData));

        // 参数加密
        const encryptedData = this.$utils.encrypt(
          JSON.stringify(requestData),
          userInfo.aesKey,
          userInfo.aesIv
        );

        // 调用删除接口
        const res = await this.$myRequest.post_token(
          getApp().globalData.khrlDel, // 确保此接口地址与后端一致
          { data: encryptedData }
        );

        // 处理删除结果
        if (res.code === 200) {
          // 1. 本地移除已删除的记录（不刷新页面）
          this.listData = this.listData.filter(item => !deletedIds.includes(item.id));
          
          // 2. 清除选中ID中已删除的部分（保留未删除的选中项，支持继续操作）
          this.selectedIds = this.selectedIds.filter(id => !deletedIds.includes(id));
          
          // 3. 更新总数统计
          this.totalCount -= deletedIds.length;
          
          // 4. 提示成功（不退出选择模式）
          uni.showToast({ 
            title: `成功移除${deletedIds.length}个客户`, 
            icon: 'success',
            duration: 1500
          });

          // 移除后重新判断“无更多提示”状态（若移除后数据变少，可能不再是最后一页）
          this.controlNoMoreTip();
        } else {
          uni.showToast({ title: res.msg || '移出失败', icon: 'none' });
        }
      } catch (e) {
        console.error('移除客户异常:', e);
        uni.showToast({ title: '网络错误，移出失败', icon: 'none' });
      } finally {
        this.deleteLoading = false; // 无论成败，结束加载状态
      }
    },

    /**
     * 选中/取消选中客户
     */
    handleSelect(itemId) {
      if (this.selectedIds.includes(itemId)) {
        // 取消选中：过滤掉当前ID
        this.selectedIds = this.selectedIds.filter(id => id !== itemId);
      } else {
        // 选中：添加到选中数组
        this.selectedIds = [...this.selectedIds, itemId];
      }
    },

    /**
     * 取消选择模式（清空选中项+退出模式）
     */
    handleCancel() {
      this.isSelectMode = false;
      this.selectedIds = [];
    },

    /**
     * 下拉刷新（重置为第一页加载）：新增清除提示逻辑
     */
    onRefresherRefresh() {
      if (this.loading || this.deleteLoading) return;
      // 清除定时器+隐藏提示
      if (this.noMoreTimer) clearTimeout(this.noMoreTimer);
      this.showNoMore = false;

      this.currentPage = 1;
      this.refreshing = true;
      this.loadData();
      // 刷新时退出选择模式，避免状态混乱
      this.isSelectMode = false;
      this.selectedIds = [];
    },

    /**
     * 下拉刷新恢复（用户未完成刷新就收回时触发）
     */
    onRefresherRestore() {
      this.refreshing = false;
      uni.stopPullDownRefresh();
    },

    /**
     * 触底加载更多：加载后自动处理提示
     */
    loadMore() {
      // 禁止条件：加载中/刷新中/删除中/无下一页
      if (this.loading || this.refreshing || this.deleteLoading || this.currentPage >= this.totalPages) {
        return;
      }
      this.currentPage++;
      this.loadData(); // 加载完成后会调用 controlNoMoreTip() 处理提示
    },

    /**
     * 搜索客户（重置为第一页）：新增清除提示逻辑
     */
    searchData() {
      if (this.loading || this.deleteLoading) return;
      // 清除定时器+隐藏提示
      if (this.noMoreTimer) clearTimeout(this.noMoreTimer);
      this.showNoMore = false;

      this.currentPage = 1;
      this.loadData();
      // 搜索时退出选择模式
      this.isSelectMode = false;
      this.selectedIds = [];
    },

    /**
     * 返回上一页
     */
    back() {
      uni.navigateTo({
        url:'/pages/wdkh/wdkh'
      })
    },

    /**
     * 添加客户（占位方法，可根据实际需求扩展）
     */
    handleAdd() {
      uni.navigateTo({
        url:'/pages/khrl/add'
      })
    }
  }
};
</script>

<style scoped>
/* 容器样式 */
.container {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f5f5f5;
}

/* 主内容区 */
.main-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 10px;
}

/* 搜索区域 */
.search-container {
  background-color: #fff;
  padding: 15rpx 20rpx;
  margin-bottom: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  border-radius: 60rpx;
  padding: 10rpx 20rpx;
}
.search-icon { margin-right: 10rpx; }
.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  outline: none;
}

/* 列表滚动容器 */
.table-scroll-container {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
}

/* 列表项 */
.list-item {
  height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-bottom: 1px solid #eee;
}
.item-content {
  display: flex;
  align-items: center;
  width: 100%;
}
.item-checkbox {
  margin-right: 20rpx;
  transform: scale(1.2);
}
.item-name {
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 加载中提示 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}
.loading-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading-text {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 无数据提示 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 40rpx);
  padding: 40rpx 0;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 无更多数据提示：样式不变 */
.no-more-state {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}
.no-more-text {
  font-size: 26rpx;
  color: #999;
}

/* 底部按钮区域 */
.bottom-buttons {
  display: flex;
  height: 100rpx;
  border-top: 1px solid #eee;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.bottom-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  border: none;
  background: transparent;
  outline: none;
}
.add-btn {
  color: #007aff;
  border-right: 1px solid #eee;
}
.cancel-btn {
  color: #666;
  border-right: 1px solid #eee;
  background-color: #f5f5f5;
}
.remove-btn {
  color: #ff5252;
}
.confirm-remove {
  background-color: #ff5252;
  color: #fff;
}
.bottom-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>